<template>
  <div class="d3-container" ref="d3Container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as d3 from "d3";

const d3Container = ref(null);
let svg = null;

// 模拟节点和连接线的数据 (根据图片布局调整坐标)
// 坐标系原点在左上角，X向右增加，Y向下增加
// 增加 z 坐标模拟深度，z=0 表示在屏幕平面，z>0 表示更远
const nodes = [
  { id: "数据源", x: 100, y: 450, z: 0 },
  { id: "元数据", x: 300, y: 300, z: 10 },
  { id: "数据标准", x: 300, y: 400, z: 10 },
  { id: "指标管理", x: 300, y: 500, z: 10 },
  { id: "数据质量", x: 550, y: 400, z: 20 },
  { id: "主数据", x: 750, y: 450, z: 30 },
  { id: "数据资产", x: 550, y: 150, z: 20 },
  { id: "ETL调度", x: 750, y: 300, z: 30 },
  { id: "API", x: 900, y: 250, z: 40 },
  { id: "实时", x: 900, y: 180, z: 40 },
  { id: "普通", x: 900, y: 110, z: 40 },
  { id: "典型应用", x: 1050, y: 50, z: 50 },
  { id: "部门驾驶舱", x: 1050, y: 100, z: 50 },
  { id: "智能分析", x: 1050, y: 150, z: 50 },
  { id: "IRS", x: 1050, y: 200, z: 50 },
  // 添加图片中其他元素的大致位置
  { id: "全生命周期", x: 150, y: 200, z: 5, type: "label" },
  { id: "数据安全", x: 900, y: 500, z: 5, type: "label" },
];

const links = [
  { source: "数据源", target: "元数据", clickable: true },
  { source: "数据源", target: "数据标准", clickable: true },
  { source: "数据源", target: "指标管理", clickable: true }, // 根据图示添加
  { source: "元数据", target: "数据质量", clickable: true },
  { source: "数据标准", target: "数据质量", clickable: true },
  { source: "指标管理", target: "数据资产", clickable: true },
  { source: "数据质量", target: "主数据", clickable: true },
  { source: "主数据", target: "ETL调度", clickable: true },
  { source: "数据资产", target: "ETL调度", clickable: true }, // 根据图示添加
  { source: "数据资产", target: "典型应用", clickable: true },
  { source: "数据资产", target: "部门驾驶舱", clickable: true }, // 根据图示添加
  { source: "数据资产", target: "智能分析", clickable: true }, // 根据图示添加
  { source: "数据资产", target: "IRS", clickable: true }, // 根据图示添加
  { source: "ETL调度", target: "API", clickable: true },
  { source: "ETL调度", target: "实时", clickable: true },
  { source: "ETL调度", target: "普通", clickable: true },
  { source: "API", target: "IRS", clickable: true },
  { source: "实时", target: "智能分析", clickable: true },
  { source: "普通", target: "部门驾驶舱", clickable: true },
];

// 将节点ID映射到节点对象，方便查找坐标
const nodeMap = new Map(nodes.map((node) => [node.id, node]));

// 简单的透视投影函数
const perspectiveScale = (z, maxZ = 60, factor = 0.8) => {
  // z 越大，缩放因子越小 (显得更远)
  return 1 - (z / maxZ) * (1 - factor);
};

onMounted(() => {
  if (d3Container.value) {
    const containerWidth = d3Container.value.clientWidth;
    const containerHeight = d3Container.value.clientHeight || 600; // 设置默认高度
    const viewBoxWidth = 1200;
    const viewBoxHeight = 650; // 稍微增加高度

    svg = d3
      .select(d3Container.value)
      .append("svg")
      .attr("width", containerWidth)
      .attr("height", containerHeight)
      .attr("viewBox", `0 0 ${viewBoxWidth} ${viewBoxHeight}`) // 调整viewBox以适应坐标
      .style("background-color", "#0a1f44"); // 设置背景色以模拟原图

    // 定义箭头
    svg
      .append("defs")
      .append("marker")
      .attr("id", "arrowhead")
      .attr("viewBox", "-0 -5 10 10")
      .attr("refX", 23) // 箭头位置调整，使其在线条末端
      .attr("refY", 0)
      .attr("orient", "auto")
      .attr("markerWidth", 6)
      .attr("markerHeight", 6)
      .attr("xoverflow", "visible")
      .append("svg:path")
      .attr("d", "M 0,-5 L 10 ,0 L 0,5")
      .attr("fill", "#3a8fff")
      .style("stroke", "none");

    // 绘制连接线
    svg
      .append("g")
      .selectAll("line")
      .data(links)
      .enter()
      .append("line")
      .each(function (d) {
        const sourceNode = nodeMap.get(d.source);
        const targetNode = nodeMap.get(d.target);
        if (!sourceNode || !targetNode) return; // 跳过无效连接

        const scaleSource = perspectiveScale(sourceNode.z);
        const scaleTarget = perspectiveScale(targetNode.z);

        // 简单的处理，让线连接到节点的中心
        d3.select(this)
          .attr("x1", sourceNode.x)
          .attr("y1", sourceNode.y)
          .attr("x2", targetNode.x)
          .attr("y2", targetNode.y)
          .attr("stroke", "#3a8fff") // 线条颜色
          .attr("stroke-width", 1.5) // 稍微细一点
          .attr("marker-end", "url(#arrowhead)") // 添加箭头
          .style("cursor", d.clickable ? "pointer" : "default")
          .on("click", (event, d_line) => {
            if (d_line.clickable) {
              handleLineClick(d_line);
            }
          });
      });

    // 绘制节点
    const nodeGroup = svg
      .append("g")
      .selectAll("g")
      .data(nodes.filter((n) => n.type !== "label")) // 过滤掉标签类型的节点
      .enter()
      .append("g")
      .attr("transform", (d) => `translate(${d.x}, ${d.y})`)
      .each(function (d) {
        const scale = perspectiveScale(d.z);
        d3.select(this).attr(
          "transform",
          `translate(${d.x}, ${d.y}) scale(${scale})`
        );
      });

    // 使用矩形代替圆形
    nodeGroup
      .append("rect")
      .attr("x", -25) // 矩形中心对齐 (x,y)
      .attr("y", -15)
      .attr("width", 50)
      .attr("height", 30)
      .attr("fill", "#1e90ff")
      .attr("stroke", "#fff")
      .attr("stroke-width", 1);

    nodeGroup
      .append("text")
      .text((d) => d.id)
      .attr("x", 0) // 文本居中
      .attr("y", 5) // 垂直居中
      .attr("text-anchor", "middle") // 水平居中
      .attr("fill", "#fff")
      .style("font-size", "10px"); // 减小字体

    // 绘制标签类型节点 (无背景，仅文字)
    svg
      .append("g")
      .selectAll("text.label-node")
      .data(nodes.filter((n) => n.type === "label"))
      .enter()
      .append("text")
      .attr("class", "label-node")
      .attr("x", (d) => d.x)
      .attr("y", (d) => d.y)
      .attr("fill", "#ccc")
      .style("font-size", "16px")
      .style("font-weight", "bold")
      .attr("text-anchor", "middle")
      .text((d) => d.id);
  }
});

onUnmounted(() => {
  if (svg) {
    svg.remove(); // 清理 SVG 元素
  }
});

const handleLineClick = (linkData) => {
  console.log("Clicked line:", linkData);
  alert(`点击了连接线: ${linkData.source} -> ${linkData.target}`);
  // 在这里添加点击连接线后的逻辑，例如导航或显示详细信息
};
</script>

<style scoped>
.d3-container {
  width: 100%;
  height: 650px; /* 匹配 viewBox 高度或根据需要调整 */
  /* background-image: url('path/to/your/background_image.png'); */ /* 可以设置背景图 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  overflow: hidden; /* 防止 SVG 溢出 */
}

/* 可以添加一些全局 SVG 样式 */
:deep(svg) {
  display: block; /* 移除 SVG 底部多余空间 */
}

:deep(line) {
  transition: stroke-width 0.2s ease-in-out;
}

:deep(line:hover) {
  stroke-width: 3 !important; /* 悬停时加粗线条 */
}
</style>
